<template>
  <div class="home">
    <el-row style="margin-left: 0" class="content-row">
      <div class="content-main content-main-1">
        <div class="grid-content bg-purple" style="position: relative">
          <div class="hTitle">
            <span> 设备服务概览 </span>
          </div>
          <div class="curForm">
            <!-- <el-select v-model="formInline.curTime" style="width:100px" size="mini" clearable @change="onChange">
              <el-option label="最近半年" value="1"></el-option>
              <el-option label="自定义" value="2"></el-option>
            </el-select> -->
            <!-- <div>请选择年份：</div>
            <el-date-picker
              value-format="yyyy"
              v-model="formInline.curYear"
              style="width: 120px"
              @change="onChangePicker"
              size="mini"
              type="year"
              placeholder="选择年"
            >
            </el-date-picker> -->
            <el-form :inline="true" :model="formInline" size="small" label-width="100px">
              <el-form-item label="请选择年份：">
                <el-date-picker value-format="yyyy" v-model="formInline.curYear" style="width: 120px" @change="onChangePicker" size="mini" type="year" placeholder="选择年">
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="lists">
          <li style="cursor: pointer">
            <div>
              <img src="../assets/images/total.png" />
            </div>
            <div class="long1">
              <span>设备总数</span>
              <countTo :startVal="oldDeviceCount" style="font-size: 20px" :endVal="deviceCount" :duration="3000"></countTo>
            </div>
          </li>
          <li style="cursor: pointer">
            <div>
              <img src="../assets/images/add.png" />
            </div>
            <div class="long1">
              <span>当月新增设备数</span>
              <countTo :startVal="oldDeviceNormal" style="font-size: 20px" :endVal="addTotal" :duration="3000"></countTo>
            </div>
          </li>
        </div>
        <div id="left">
          <leftTop />
        </div>
      </div>
      <div class="content-main">
        <div class="grid-content bg-purple" style="position: relative">
          <div class="hTitle">
            <span>当日消息概览</span>
          </div>
        </div>
        <div class="lists">
          <li style="cursor: pointer">
            <div>
              <img src="../assets/images/shengji.png" />
            </div>
            <div class="long1">
              <span>升级完成</span>
              <countTo :startVal="oldDeviceAlarm" style="font-size: 20px" :endVal="upgradeTotal" :duration="3000"></countTo>
            </div>
          </li>
          <li style="cursor: pointer">
            <div>
              <img src="../assets/images/liuliang.png" />
            </div>
            <div class="long1">
              <span>使用流量</span>
              <div style="font-size:20px">
                <!-- <countTo
                  :startVal="0"
                  style="font-size: 20px"
                  :endVal="fileSizeTotal"
                  :duration="3000"
                ></countTo
                > -->
                {{ fileSizeTotal |fileSizeForMatter  }}
              </div>
            </div>
          </li>
        </div>
        <div id="right">
          <rightTop />
        </div>
        <!-- </el-col> -->
      </div>
    </el-row>
    <el-row class="bottom_row">
      <div id="homeBottom">
        <bottom />
      </div>
    </el-row>
  </div>
</template>

<script>
import { parseTime } from "@/utils/index";
import leftTop from "./homeLeafCard/leftTop";
import rightTop from "./homeLeafCard/rightTop";
import bottom from "./homeLeafCard/bottom";

import * as homeApi from "@/api/home";

import countTo from "vue-count-to";
export default {
  components: { countTo, leftTop, rightTop, bottom },
  data() {
    return {
      tenantId: null,
      oldDeviceCount: 0,
      oldDeviceNormal: 0,
      oldDeviceAlarm: 0,
      oldDeviceOffline: 0,
      //
      deviceCount: 0,
      addTotal: 0,
      upgradeTotal: 0,
      fileSizeTotal: 0,
      activeIndex: 0,
      pickertime: "",
      formInline: {
        curTime: "1",
        curYear: "",
      },
      dataC: [
        { label: "1天", value: "24h" },
        { label: "3天", value: "3d" },
        { label: "7天", value: "7d" },
      ],
      echartData: [
        { value: 335, name: "处理中" },
        { value: 105, name: "待处理" },
        { value: 310, name: "已完成" },
      ],
      initLeftX: [],
      initLeftY: [],
      curTimer: null,
      EquTimer: null,
    };
  },
  watch: {
    deviceCount(newVal, oldVal) {
      this.oldDeviceCount = oldVal;
    },
    addTotal(newVal, oldVal) {
      this.oldDeviceNormal = oldVal;
    },
    upgradeTotal(newVal, oldVal) {
      this.oldDeviceAlarm = oldVal;
    },
    fileSizeTotal(newVal, oldVal) {
      this.oldDeviceOffline = oldVal;
    },
  },

  beforeRouteLeave(to, form, next) {
    this.$bus.$emit("beforeRouteLeave");
    next();
  },
  mounted() {
    this.formInline.curYear = new Date();
    this.$bus.$emit("routeEnter");

    this.$bus.$on("tenantId", (val) => {
      if (val == "") {
        this.tenantId = null;
      } else {
        this.tenantId = val;
      }
      this.getCountDevice({
        type: "0",
        tenantId: this.tenantId,
        dateTime: new Date().getFullYear(),
      });
      this.getMessages({ tenantId: this.tenantId });
    });

    this.getMessages();
    this.getCountDevice({ type: "0", dateTime: new Date().getFullYear() });
  },
  filters: {
    fileSizeForMatter(val) {
      // console.log(val)
      var size = "";
      if (val < 0.1 * 1024) {
        //小于0.1KB，则转化成B
        size = val.toFixed(2) + "B";
      } else if (val < 0.1 * 1024 * 1024) {
        //小于0.1MB，则转化成KB
        size = (val / 1024).toFixed(2) + "KB";
      } else if (val < 0.1 * 1024 * 1024 * 1024) {
        //小于0.1GB，则转化成MB
        size = (val / (1024 * 1024)).toFixed(2) + "MB";
      } else {
        //其他转化成GB
        size = (val / (1024 * 1024 * 1024)).toFixed(2) + "GB";
      }
      var sizeStr = size + ""; //转成字符串
      var index = sizeStr.indexOf("."); //获取小数点处的索引
      var dou = sizeStr.substr(index + 1, 2); //获取小数点后两位的值
      if (dou == "00") {
        //判断后两位是否为00，如果是则删除00
        return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2);
      }
      return size;
    }
  },
  methods: {
    // 设备服务概览
    getCountDevice(data) {
      homeApi.countDevice(data).then((res) => {
        var curData = res.data;
        this.deviceCount = curData.total;
        this.addTotal = curData.addTotal;
        this.$bus.$emit("countDevice", curData);
      });
    },
    // 当日消息概览
    getMessages(data) {
      homeApi.getMessages(data).then((res) => {
        this.upgradeTotal = res.data.upgradeTotal;
        this.fileSizeTotal = Math.ceil(res.data.fileSizeTotal);
        this.$bus.$emit("messages", res.data);
      });
    },

    onChange(value) {
      switch (value) {
        case "1":
          this.getCountDevice({ type: "1", tenantId: this.tenantId });
          break;
        case "2":
          break;
      }
    },
    onChangePicker(value) {
      if (value) {
        this.getCountDevice({
          type: "0",
          dateTime: value,
          tenantId: this.tenantId,
        });
      } else {
        this.$message({
          type: 'warning',
          message: '必须选择年份'
        })
      }

    },
  },
  destroyed() {
    if (this.curTimer) {
      clearInterval(this.curTimer);
    }
    if (this.EquTimer) {
      clearInterval(this.EquTimer);
    }
  },
};
</script>

<style lang="scss" scoped>
.activeBtn {
  background-color: #0975bc;
}
.home {
  #homeEchart {
    width: 100%;
    height: calc(100vh - 230px);
    margin-top: 10px;
    // background-color: red;
    position: relative;
    #left {
      position: absolute;
      width: 48%;
      height: 50%;
      // border: 1px solid #ccc;
    }
    #right {
      position: absolute;
      right: 0;
      width: 48%;
      height: 50%;
      // border: 1px solid #ccc;
    }

    #homeBottom {
      position: absolute;
      bottom: 0;
      height: 44%;
      width: 100%;
      // border: 1px solid red;
    }
  }
}

.el-col {
  background: #fff;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 5px;
  padding: 15px;
}
.home {
  padding: 20px;
  height: 100%;
  .content-row {
    display: flex;
    align-items: center;
    .content-main {
      background: #fff;
      border-radius: 5px;
      padding: 15px;
      flex: 1;
      .hTitle {
        font-size: 18px;
        color: #303133;
        line-height: 28px;
        padding-left: 10px;
        span {
          &:before {
            content: ' ';
            width: 3px;
            height: 65%;
            position: absolute;
            top: 5px;
            left: 0;
            background: #4a80e2;
          }
        }
      }
      .curForm {
        position: absolute;
        right: 0;
        top: 0px;
        display: flex;
        align-items: center;
        > div {
          font-size: 14px;
        }
      }
      .grid-content {
        margin-bottom: 20px;
      }
      .lists {
        display: flex;
        margin-bottom: 20px;
        li {
          flex: 1;
          display: flex;
          align-items: center;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          background: #fff;
          // color: #31db71;
          position: relative;
          padding: 0;
          width: 25%;
          height: 83px;
          border-radius: 8px;
          margin-right: 10px;
          padding: 10px 20px;
          img {
            width: 45px;
            vertical-align: middle;
            margin-right: 20px;
          }
          .long1 {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
              text-align: center;
              font-size: 16px;
              color: #323232;
              // font-weight: 600;
            }
          }
        }
        li:last-child {
          margin-right: 0;
        }
      }
      #left,
      #right {
        height: 300px;
        width: 100%;
      }
    }
    .content-main-1 {
      margin-right: 20px;
    }
  }
  .bottom_row {
    margin-top: 20px;
    background: #fff;
    border-radius: 5px;
    padding: 15px;
    #homeBottom {
      max-height: 310px;
      width: 100%;
    }
  }
}
</style>